import iconFont from '@/assets/iconFont/iconfont.less';
import cls from 'classnames';
import type * as CSS from 'csstype';

const Icon: React.FC<{
  code: string;
  style?: CSS.Properties<string | number>;
}> = ({ style = {}, code }) => {
  return (
    <span
      className={cls([iconFont.iconfont])}
      style={{
        ...style,
      }}
      dangerouslySetInnerHTML={{ __html: code }}
    ></span>
  );
};

//下拉按钮
const DownOutlined = ({ style = {} }) => {
  return (
    <Icon
      code={'&#xe8fb;'}
      style={{
        display: 'block',
        color: '#828387',
        fontSize: 10,
        ...style,
      }}
    />
  );
};

//收起按钮
const UpOutlined = ({ style = {} }) => {
  return (
    <Icon
      code={'&#xe8fb;'}
      style={{
        display: 'block',
        color: '#828387',
        fontSize: 10,
        ...style,
      }}
    />
  );
};

const MenuFoldOutlined = ({ style = {} }) => {
  return <Icon code={'&#xe869;'} style={style} />;
};

const MenuUnfoldOutlined = ({ style = {} }) => {
  return <Icon code={'&#xe867;'} style={style} />;
};

export { DownOutlined, UpOutlined, MenuFoldOutlined, MenuUnfoldOutlined };
